<template>
	<view class="container">
		<view class="search-box">
			<van-search v-model="searchValue" placeholder="搜索职位/公司" />
			<view class="ranking">
				<icon class="iconfont icon-ranking" size="26" />
				<text>快聘榜</text>
			</view>
		</view>
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class="swiper-item" v-for="item in bannerList" :key="item.id">
				<image :src="item.img" mode=""></image>
			</swiper-item>
		</swiper>
		<PostList />
	</view>
</template>

<script setup>
import { ref } from 'vue';
import PostList from '@/components/list/list.vue';

const searchValue = ref('');
const bannerList = ref([
	{ img: new URL('@/static/images/banner1.jpg', import.meta.url).href, id: 1 },
	{ img: new URL('@/static/images/banner2.jpg', import.meta.url).href, id: 1 }
]);
console.log(new URL('@/static/images/banner1.jpg', import.meta.url).href);
</script>

<style lang="scss" scoped>
.container {
	background: #f7f8fa;
}
.search-box {
	width: 95%;
	padding: 30px 10px 15px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(to bottom, #fff990, #fff991, #fff992, #fff993, #fff994, #fff995, #fff996, #fff997, #fff998, #fff999, #fffff9, #f7f8fa);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	.van-search {
		width: 70%;
		padding: 0;
		border-radius: 15px;
		:deep(.van-search__content) {
			border-radius: 15px;
		}
	}
	.ranking {
		width: 18%;
		padding: 5px 10px;
		border-radius: 15px;
		background-color: #f7f8fa;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 24px;
		.iconfont {
			color: #ffe943;
			font-size: 14px;
		}
		text {
			font-size: 14px;
		}
	}
}
.swiper {
	border-radius: 4px;
	margin-top: 79px;
	padding: 0 10px 0 10px;
	.swiper-item {
		width: 100%;
		border-radius: 4px;
		image {
			width: 100%;
			height: 100%;
			border-radius: 4px;
		}
	}
}
</style>
